<script lang="ts" setup>
import {ref} from "vue";
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
import axios from "axios";

const $toast = useToast();//消息提示栏

const username = ref('')
const password = ref('')
const name = ref('')
const sexs = ref('男')
const tel = ref('')
const sfz = ref('')
const bornDate = ref(new Date())


const sexOption = ['男', '女']
const accept = ref(false)
const againPassword = ref('')
const onSubmit = () => {
  if (accept.value === true) {

    const data = {
      "identificationCard": sfz.value,
      "password": password.value,
      "name": name.value,
      "sexs": sexs.value,
      "bornDate": new Date(bornDate.value).toISOString().split('T')[0],
      "username": username.value,
      "tel": tel.value
    }
    console.log(data)
    axios.post("/api/auth/register?code=患者", data)
        .then(res => {
          // console.log(res)
          if (res.data.success) {
            const msg = res.data.message
            localStorage.setItem("patient-auth-token", msg)
            $toast.open({
              type: "success",
              position: "bottom",
              message: "注册成功"
            })
            setTimeout(() => {
              window.location.href = "/"
            }, 300)
          } else {
            const msg = res.data.message
            $toast.open({
              type: "warning",
              position: "bottom",
              message: msg
            })
          }
        })

  } else {
    $toast.clear();
    $toast.open({
      message: '首先勾选隐私协议和用户协约',
      type: 'warning',
      position: 'bottom'
      // all of other options may go here
    });
  }
}
const onReset = () => {
  username.value = ''
  password.value = ''
  name.value = ''
  sexs.value = '男'
  tel.value = ''
  sfz.value = ''
  bornDate.value = new Date()
  accept.value = false
}

const showToast = () => {

  $toast.clear();
  $toast.open({
    message: 'email 不能为空！',
    type: 'warning',
    position: 'bottom'

  })
}

</script>

<template>
  <div class="register-info">
    <div class="text-h4" style="margin-top: 30px;margin-bottom: 3vh;text-align: center
">完成注册
    </div>
    <q-form
        class="q-gutter-md"
        style="width: 60vw;margin-left: 20vw;margin-right: 20vw;min-width: 400px"
        @reset="onReset"
        @submit="onSubmit"
    >


      <q-input
          v-model="name"
          :rules="[ val => val && val.length > 0 || '请输入你的名字']"
          filled
          label="你的名字"
          lazy-rules
      />

      <q-input
          v-model="tel"
          :rules="[
          val => val.length === 11 && val !== '' || '请输入你的手机号'
        ]"
          filled
          label="你的手机号"
          lazy-rules
      />
      <q-select v-model="sexs" :options="sexOption" label="性别"/>
      <q-input
          v-model="sfz"
          :rules="[
              val => val !== null && val !== '' || '请输入你的你的身份证',
              val => val.length === 18 || '请输入正确的身份证号码'
        ]"
          filled
          label="你的身份证*"
          lazy-rules
      />
      <q-input
          v-model="username"
          :rules="[ val => val && val.length > 0 || '请输入你的账号']"
          filled
          label="你的账号"
          lazy-rules
      />
      <q-input
          v-model="password"
          :rules="[
          val => val !== null && val !== '' || '请输入你的你的密码',
          val => val.length >= 6 && val.length < 30 || '密码强度不够，请重新输入'
        ]"
          filled
          label="你的密码*"
          lazy-rules
          type="password"
      />
      <q-input
          v-model="againPassword"
          :rules="[
          val => val !== null && val !== '' || '请重复输入你的你的密码',
          val => val == password || '两次输入密码不对'
        ]"
          filled
          label="重复输入你的密码*"
          lazy-rules
          type="password"
      />
      <div style="display: flex;align-items: center;justify-content: space-between">
        <q-input v-model="bornDate" filled type="date"
                 style="margin-right: 30px;" hint="出生日期" />

        <div style="display: flex;flex-direction: column">
          <q-toggle v-model="accept" :rules="[ val => val == true || '你首先需要勾选用户协议']"
                    label="我接受隐私条约和用户协议"/>
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center">
        <div style="margin: 40px;">
          <q-btn color="primary" label="提交" style="margin-right: 30px;" type="submit"/>
          <q-btn class="q-ml-sm" color="primary" flat label="重置" type="reset"/>
        </div>
      </div>
    </q-form>

  </div>
</template>

<style lang="scss" scoped>
.register-info {
  display: flex;
  flex-direction: column;
  width: 100vw;

}
</style>
